<template>

	<view class="alert-bg">

		<view :class="{ mask: popupShow }" @click="closePop"></view>
		<view :class="{ 'popup-active-share': popupShow }" class="popup-qrcode-share" :style="'z-index:'+(zIndex+100)">
			<view class="con-box">
				<view class="close" @click="closePop">
					<text class="iconfont icon-guanbi"></text>
				</view>
				<view class="title">线上咨询须知:</view>
				<view class="tips-box">
					<text class="iconfont icon-zhuyi-copy"></text>
					<text>本次问诊费用为{{price}}元,请保持账户余额充足.</text>
				</view>

				<view class="title">说明:</view>
				<view class="tips-info-box">
					<view class="tips-item">
						<text>1.本功能仅提供咨询服务，不支持单开处方。线上咨询不能代替面诊，</text>
						<text class="alert">急诊、危重症等患者请到医院就诊。</text>
					</view>
					<view class="tips-item">
						<text>2.若取消预约，请在医生发起视频前取消，取消后可退款。医生接诊后，不支持取消。</text>
					</view>
				</view>

				<view class="agree-box" @click="goNext">
					<view class="agree">同意并继续</view>
				</view>

			</view>
		</view>

	</view>

</template>

<script>
	export default {
		name: 'askAlert',
		props: {
			popupShow: {
				type: Boolean,
				default: false
			},
			price: {
				type: Number | String,
				default: 0,
			}
		},
		data() {
			return {
				zIndex: 50,
			}
		},
		mounted() {

		},
		methods: {
			closePop() {
				this.$emit('closeAlertPop');
			},
			goNext(){
				this.$emit('alertGoNext');
			}
		}
	}
</script>

<style lang="scss">
	.alert-bg {
		.popup-qrcode-share {
			position: fixed;
			top: 45%;
			left: 50%;
			width: 544rpx;
			padding-top: 48rpx;
			padding-bottom: 30rpx;
			border-radius: 24rpx;
			background-color: #ffffff;
			transform: translate(-50%, -50%) scale(0);
			opacity: 0;
			transition: 0.3s;
			line-height: 1;
			text-align: center;
			color: #282828;
		}

		.popup-active-share {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}

		.con-box {
			padding: 20rpx 30rpx;
			position: relative;
			text-align: left;

			.close {
				position: absolute;
				right: 0;
				top: -50rpx;
				padding: 30rpx;

				.iconfont {
					font-size: 30rpx;
				}
			}

			.title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.tips-box {
				background-color: #FFE6DF;
				color: #F9541C;
				padding: 15rpx 20rpx;
				border-radius: 10rpx;
				line-height: 1.2;
				margin: 20rpx 0rpx 50rpx;
			}

			.tips-info-box {
				padding: 20rpx 0;
				line-height: 1.2;

				.alert {
					color: red;
				}
			}

			.agree-box {
				margin: 30rpx 0 0;
				display: flex;
				justify-content: center;

				.agree {
					width: 80%;
					display: flex;
					justify-content: center;
					background-color: $yy-main-col;
					color: #fff;
					padding: 20rpx 0;
					border-radius: 10rpx;
				}
			}

		}





	}
</style>
